<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<!--移动端兼容设置-->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,
		user-scalable=0" />
		<title>电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/login.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<script src="../bootstrap3/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/autoLogin.js" type="text/javascript"></script>
	</head>
	<body>

	<!--主体-->
	<div class="container mycontent text-left">
		<!--透明层 -->
		<div class="loginDiv">
			<p>用户登录</p>
			<!--表单开始-->
			<form id="form-login" action="index.html"  class="form-horizontal" role="form">
				<!--用户名-->
				<div class="form-group">
					<label for="username" class="col-md-3 control-label">名字：</label>
					<div class="col-md-8">
						<input id="username" name="username" type="text" class="form-control" id="username"  placeholder="请输入用户名">
					</div>
				</div>
				<!--密码-->
				<div class="form-group">
					<label for="password" class="col-md-3 control-label"> 密码：</label>
					<div class="col-md-8">
						<input id="password" name="password" type="password" class="form-control" id="password"  placeholder="请输入密码">
					</div>
				</div>
				<!-- 验证码 -->
				<div class="form-group">
					<label for="yanzhengma" class="col-md-3 control-label">验证码：</label>
					<div class="col-md-8">
						<input name="yanzhengma" type="text" class="form-control" id="yanzhengma" placeholder="请输入验证码">
						<canvas id="verify" width="150" height="50"></canvas>
					</div>
				</div>
				<!-- 记住我-->
				<div class="form-group">
					<div class="col-md-offset-3 col-md-6">
						<div class="checkbox">
							<label>
								<input type="checkbox" id="auto">自动登录
							</label>
						</div>
					</div>
				</div>
				<!--提交按钮-->
				<div class="form-group">
					<label class="col-md-3 control-label"></label>
					<div class="col-md-8">
						<input id="btn-login" class="btn btn-primary" type="button" value="登录" />
						<span class="pull-right"><small>还没有账号？</small><a href="register.html">注册</a></span>
					</div>
				</div>
			</form>
		</div>
	</div>

	<script type="text/javascript">
		localStorage.removeItem("uid");
		localStorage.removeItem("businessId");

		var username=document.querySelector('#username');
		var password=document.querySelector('#password');
		var input = document.querySelector('#yanzhengma');
		var ctx = getCanvas("verify");
		var width = getCanvasWidth("verify");
		var height = getCanvasHeight("verify");

		function getCanvas(canvas_Id) {
			return document.getElementById(canvas_Id).getContext("2d");
		}

		function getCanvasWidth(canvas_Id) {
			return $("#" + canvas_Id).width();
		}

		function getCanvasHeight(canvas_Id) {
			return $("#" + canvas_Id).height();
		}
		/**
		 *  description：初始化画布
		 *  canvas_Id：画布的ID
		 *  bgColor：画布的背景颜色
		 */
		function init_Canvas(canvas_Id, bgColor) {
			ctx.fillStyle = bgColor;
			ctx.fillRect(0, 0, width, height);
		}

		/**
		 * description：产生min--max之间的整数
		 * */
		function RandomNUM(min, max) {
			return parseInt(Math.random() * (max - min) + min);
		}


		function RandomColor() {
			var r = RandomNUM(0, 255);
			var g = RandomNUM(0, 255);
			var b = RandomNUM(0, 255);
			return `rgb(${r},${g},${b})`;
		}
		/**
		 * description：画干扰线
		 * num：干扰线的根数
		 * */
		function drawLine(num) {
			for (var i = 0; i < num; i++) {
				ctx.beginPath();
				ctx.moveTo(RandomNUM(0, width), RandomNUM(0, height));
				ctx.lineTo(RandomNUM(0, width), RandomNUM(0, height));
				ctx.strokeStyle = RandomColor();
				ctx.closePath();
				ctx.stroke();
			}
		}
		/**
		 * description：产生随机字符
		 * num：随机字符的个数
		 * result：返回随机生成的字符串
		 * */
		function RandomString(num) {
			var pool = "abcdefghijklmnopqrstuvwxyz1234567890";
			var result = "";
			for (var i = 0; i < num; i++) {
				var c = pool[RandomNUM(0, pool.length)]; //随机的字
				result += c;
				var fontSize = RandomNUM(18, 40); //字体的大小
				var deg = RandomNUM(-30, 30); //字体的旋转角度
				ctx.font = fontSize + 'px Simhei';//字体大小及字体黑体
				ctx.textBaseline = "top";//设置当前文本基线为顶部
				ctx.fillStyle = "#FFF";//设置字体填充颜色
				ctx.save();
				ctx.translate(30 * i + 15, 15);//设置画布（0,0）点位置
				ctx.rotate(deg * Math.PI / 180);//旋转绘图
				ctx.fillText(c, 0, 0);//绘制填充文本
				ctx.restore();//返回之前保存过的路径状态和属性
			}

			return result;
		}
		init_Canvas("verify", "#123");
		drawLine(5);
		var b = RandomString(4);
		console.log(b);


		/*
            1.给按钮添加监听是否被点击 调用click方法自动完成监听click方法要求传递一个function函数
                function函数里调用ajax函数，ajax函数传递方法体方法体要求为一段大括号，再讲参数列表显示的结构写出来

                data可调用序列化自动完成序列化某一个表单 用id选择器选择form表单，再去序列化一个key value键值对
        */
		$("#btn-login").click(function () {
			var name=username.value;
			var passw=password.value;
			var c = input.value;
			console.log(c);
			console.log(name);
			console.log(passw);
			if(name==""){
				alert('请输入用户名')
				location.href="login.html";
			}
			if(passw==""){
				alert('请输入密码')
				location.href="login.html";
			}
			if (c != b) {
				alert('验证码输入错误')
			}
			else{
				$.ajax({
					url:"/user/login",
					type:"POST",
					data:$("#form-login").serialize(),
					dataType:"JSON",
					success:function (json) {
						console.log(json.data);
						//alert(json);
						if(json.state===5001) {
							alert("用户数据不存或未审核,请联系管理员");
						}
						else if(json.state==200&&json==null){
							alert("用户名的密码错误");
						}
						else if(json.state==200&&json.data.userType==0&&json.data.isDelete==0){
							alert("用户登录成功");
							//跳转到系统主页
							//相对路径来确定跳转页面  ./ 上级../
							localStorage.setItem("uid",json.data.uid);
							location.href="index_user.html";
							//将服务器端返回的头像设置到Cookie中
							$.cookie("avatar",json.data.avatar,{expires:7});////time单位天
							console.log(json.data.avatar);
						}
						else if(json.state==200&&json.data.userType==1&&json.data.isDelete==0){
							alert("管理员登录成功");
							//跳转到系统主页
							//相对路径来确定跳转页面  ./ 上级../
							localStorage.setItem("uid",json.data.uid);
							location.href="index_admin.html";
							//将服务器端返回的头像设置到Cookie中
							$.cookie("avatar",json.data.avatar,{expires:7});////time单位天
							console.log(json.data.avatar)

						}else if(json.state==200&&json.data.userType==2&&json.data.isDelete==0){
							alert("商家登录成功");
							//跳转到系统主页
							//相对路径来确定跳转页面  ./ 上级../
							localStorage.setItem("uid",json.data.uid);							localStorage.setItem("uid",json.data.uid);
							localStorage.setItem("businessId",json.data.uid);

							location.href="index_business.html";
							//将服务器端返回的头像设置到Cookie中
							$.cookie("avatar",json.data.avatar,{expires:7});////time单位天
							console.log(json.data.avatar);

						}
						else{
							alert("用户名的密码错误");
						}
					},
					error:function (xhr) {
						alert("登录时产生未知的异常"+xhr.message);//自动产生错误描述信息
					}
				})
			}

		})
	</script>
	</body>
</html>